import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import MyListView from '../../components/MyListView/MyListView';
import HotsListItem from './hotsListItem';
import {routerRedux} from "dva/router";
import {checkbox} from './findPeople.less';
import {findIndex, fenlei, noguanzhu} from './findIndex.less';
import fenxiang1 from '../../assets/svg/fenxiang1.svg';
import {evalute_madel} from "../evaluate/EvaluateListItem.less";
import {person} from "./personHome.less";
import {myHead, myHeadTwo} from "../my/myHeader.less";




class TopicPage extends Component {
    constructor(props){
        super(props);
        this.state={

        }
        this.AlloyTouch = null;

    }

    encodeUnicode=(str) =>{
        let res = [];
        for ( let i=0; i<str.length; i++ ) {
            res[i] = ( "00" + str.charCodeAt(i).toString(16) ).slice(-4);
        }
        return "\\u" + res.join("\\u");
    }
    componentDidMount(){
        this.refresh();
    }
    refresh = () => {
        return this.props.dispatch({ type: 'findOthers/connerListEFF',obj:{topicName:this.encodeUnicode(this.props.match.params.data),pageNo:1} });
    }

    loadMore = () => {
        return this.props.dispatch({ type: 'findOthers/connerListEFF', obj:{topicName:this.encodeUnicode(this.props.match.params.data),pageNo:this.props.findOthers.pageNo+1} });
    }
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };

    render() {
        const {dispatch} = this.props;
        const {shopTrendsEntities=[],viewsCount }=this.props.findOthers;
        return ( <Flex direction="column" className={person} style={{height:"100%"}}>
                <div className="myHead">
                    <WingBlank>
                        <Flex justify="between"  style={{color:"#fff",margin:".2rem 0"}}>
                            <Icon type="left" style={{width:".44rem",height:".44rem"}} onClick={()=>{
                                this.props.dispatch(routerRedux.goBack());
                            }}></Icon>
                            <div style={{fontSize:".35rem"}}>话题主页</div>
                            <Icon type={fenxiang1.id} style={{opacity:"0",width:".44rem",height:".44rem"}}></Icon>
                        </Flex>
                        <Flex style={{margin:".5rem 0 .2rem 0",fontSize:".4rem"}}>
                            #{this.props.match.params.data}#
                        </Flex>
                        <Flex style={{marginBottom:".5rem"}}>
                            浏览量:{viewsCount}人浏览
                        </Flex>
                    </WingBlank>
                </div>

                {
                    shopTrendsEntities&&shopTrendsEntities.length>0? <MyListView
                        style={{marginBottom:"1rem"}}
                        getAlloyTouch={ this.getAlloyTouch }
                        refresh={ this.refresh }
                        loadMore={ this.loadMore }
                        hasMore={ this.props.findOthers.pageNo * this.props.findOthers.pageSize < this.props.findOthers.totalRows  }
                        // itemWrapperClass={ goods_list }
                        // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                        renderItem={(v,i,a)=>{
                            return <HotsListItem dispatch={dispatch} topic={this.props.match.params.data} v={v} key={i}  Refresh={ this.refresh }></HotsListItem>
                        }}
                        data={ shopTrendsEntities }>
                    </MyListView>:<div className={noguanzhu}>
                        <div className="guanzhuLogo"></div>
                        <div style={{color:"#999",marginTop:".3rem"}}>当前话题无人发表动态!</div>
                    </div>
                }

            </Flex>

        )


    }
}

export default connect(({ findOthers }) => ({ findOthers}))(TopicPage);
